<template>
  <Pannel navbar>

    <view class="lzqk-box" :style="[lzqkImg]">
      <view class="user-msg">
        <view class="user-image">
          <image class="image-box" src="https://cdn.uviewui.com/uview/common/logo.png" mode="aspectFit"></image>
        </view>
        <view class="user-name">陈小丽</view>
      </view>
      <view class="content">
        <view class="header">
          <view class="year">2024</view>
          <view class="text">这一年里先进的你超努力！完成了：</view>
        </view>

        <view class="list">
          <view class="item">
            <view class="text">市委会活动</view>
            <view class="msg">
              <view class="num">5</view>
              <view class="text">次</view>
            </view>
          </view>

          <view class="item">
            <view class="text">支部活动</view>
            <view class="msg">
              <view class="num">5</view>
              <view class="text">次</view>
            </view>
          </view>

          <view class="item">
            <view class="text">参政议政</view>
            <view class="msg">
              <view class="num">5</view>
              <view class="text">篇</view>
            </view>
          </view>

          <view class="item">
            <view class="text">社情民意</view>
            <view class="msg">
              <view class="num">5</view>
              <view class="text">篇</view>
            </view>
          </view>

          <view class="item">
            <view class="text">宣传</view>
            <view class="msg">
              <view class="num">5</view>
              <view class="text">篇</view>
            </view>
          </view>

          <view class="item">
            <view class="text">社会服务</view>
            <view class="msg">
              <view class="num">5</view>
              <view class="text">次</view>
            </view>
          </view>

          <view class="item">
            <view class="text">扶贫工作</view>
            <view class="msg">
              <view class="num">5</view>
              <view class="text">次</view>
            </view>
          </view>

          <view class="item">
            <view class="text">祖统工作</view>
            <view class="msg">
              <view class="num">5</view>
              <view class="text">次</view>
            </view>
          </view>

          <view class="item">
            <view class="text">组织发展</view>
            <view class="msg">
              <view class="num">5</view>
              <view class="text">人</view>
            </view>
          </view>

          <view class="item">
            <view class="text">获奖情况</view>
            <view class="msg">
              <view class="num">5</view>
              <view class="text">次</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </Pannel>
</template>

<script>
import lzqk from '@/utils/base64/lzqk.js';
import Pannel from '../../components/Pannel/Pannel.vue';

export default {
  data() {
    return {
      top: '',
      height: ''
    }
  },
  computed: {
    lzqkImg() {	// 履职情况 图片
      return {
        backgroundImage: `url(${lzqk})`
      }
    },
  },
  methods: {
    onBack() {
      uni.navigateBack()
    }
  },
  onLoad(options) {
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.height = menuButtonInfo.height * 2 + 'rpx';
    this.top = menuButtonInfo.top * 2 + 'rpx';
  }
}

</script>

<style lang="scss" scoped>
.image-box {
  width: 100%;
  height: 100%;
}

.lzqk-box {
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: 1624rpx;
  background-size: 100%;
  background-repeat: no-repeat;

  .user-msg {
    position: absolute;
    top: 188rpx;
    left: 496rpx;
    display: flex;
    align-items: center;

    .user-image {
      width: 48rpx;
      height: 48rpx;
    }

    .user-name {
      margin-left: 10rpx;
      font-size: 28rpx;
      color: #333333;
    }
  }

  .content {
    overflow: hidden;
    
    .header {
      position: absolute;
      top: 354rpx;
      left: 120rpx;
      display: flex;
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
    }

    .list {
      margin-top: 426rpx;
      padding: 0 110rpx 0 96rpx;
      box-sizing: border-box;
      font-size: 16px;
      color: #333333;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30rpx;
        height: 68rpx;
        border-bottom: 1rpx solid #edbe9f;
        box-sizing: border-box;

        .msg {
          display: flex;
          align-items: center;

          .num {
            font-size: 20px;
            color: #b75b19;
          }

          .text {
            margin-left: 20rpx;
          }
        }
      }
    }
  }
}
</style>